<template>
    <view>
        <uni-nav-bar fixed left-icon="back" title="商家店铺"></uni-nav-bar>
        <view class="m-content" v-if="busin.name">
            <view class="m-message">
                <view class="m-body">
                    <view class="m-title">{{busin.name}}</view>
                    <view class="m-text" v-if="busin.address">地址：{{busin.address}}</view>
                    <!--<view class="m-time">营业：07:00-23:00</view>-->
                </view>
            </view>
        </view>

        <view class="category-list">
            <!-- 左侧分类导航 -->
            <scroll-view  scroll-y="true" class="left" >
                <view class="row" v-for="(category,index) in categoryList" :key="category.id"
                      :class="[index==showCategoryIndex?'on':'']" @tap="showCategory(index)">
                    <view class="text">
                        <view class="block"></view>
                        {{category.title}}
                        <!--<text class="allcount" v-if="getAllCount>=category.count&&category.count>0">{{category.count}}</text>-->
                    </view>
                </view>
            </scroll-view>
            <!-- 右侧子导航 -->
            <scroll-view  scroll-y="true" class="right" >
                <view class="category" v-for="(category,index) in categoryList" :key="category.id"
                      v-show="index==showCategoryIndex" >
                    <view class="list">
                        <view class="box" v-for="(box,i) in category.list" :key="i">
                            <!-- 商品列表 -->
                            <!--<m-store-pro @touchOnGoods="touchOnGoods" :rowData="box"></m-store-pro>-->
                            <view class="m-store-item">
                                <view class="m-img">
                                    <image style="width: 100%;height: 100%;" :src="box.img" mode="aspectFit"></image>
                                </view>
                                <view class="m-text">
                                    <view class="m-title">{{box.name}}</view>
                                    <view class="m-descripe">{{box.descripe}}</view>
                                    <view class="m-old-price">非会员价
                                        <view class="m-num">{{box.oldprice}}</view>
                                    </view>
                                    <view style="display: flex;justify-content: space-between;align-items: center;padding-top: 8rpx;">
                                        <view class="m-price">{{box.price}}</view>
                                        <view class="m-distance">
                                            <cartcontrol :food="box" @add="addCart" @dec="decreaseCart" @input="inputCart"></cartcontrol>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <!--<m-footer-car :price="'￥'+carPrice" :num="carNum" @handleFn="showSpec(false)"></m-footer-car>-->

        <view class="content_box">
            <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box">
                <view class="tui-flex flex">
                    <view class="list_1" v-for="(item,index) in list" :key="index"
                          @tap="navTo(`/pagesA/ticket/components/ticketDetail?id=${item.spuId}`)">
                        <view class="r_img">
                            <image class="image" v-if="item.url" :src="item.url"></image>
                            <view class="img_txt" v-else>暂无图片</view>
                        </view>
                        <view style="padding: 20rpx 15rpx;">
                            <view class="r_des">{{item.title}}</view>
                            <view v-for="(skuItem, skuIdx) in item.skuStockList" :key="skuIdx" v-if="skuIdx == 0">
                                <view class="u_price">￥
                                    <text style="font-size: 40rpx;">
                                        {{skuItem.discoutPrice?skuItem.discoutPrice:skuItem.price}}
                                    </text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view v-if="list.length" class="cu-load text-gray" :class="loadStatus"></view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
    import secondMenu from './components/secondMenu'
    import cartcontrol from './components/cartcontrol'
    import mStorePro from './components/m-store-pro'
    import mFooterCar from './components/m-footer-car'

    export default {
        name: "store.vue",
        components: {secondMenu, cartcontrol, mStorePro, mFooterCar},
        data() {
            return {
                businId: '',
                list: [],
                food: {},
                height: 0,
                showCategoryIndex: 0,
                carPrice: 0,
                categoryList:[
                    {id:1,title:'生鲜果蔬',list:[
                            {   id:1,
                                name:'精品秋葵600g',
                                descripe:"脆糯营养，口感好，健康绿色",
                                img:'/static/image/1.jpg',
                                price:"￥9",
                                oldprice:"￥100"
                            },
                            {   id:2,
                                name:'精品秋葵300g',
                                descripe:"脆糯营养，口感好，健康绿色",
                                img:'../../static/image/1.jpg',
                                price:"￥8",
                                oldprice:"￥100"
                            }

                        ]},
                    {id:2,title:'鲜花绿植',list:[
                            {   id:3,
                                name:'玫瑰花',
                                descripe:"脆糯营养，口感好，健康绿色",
                                img:'/static/image/1.jpg',
                                price:"￥4",
                                oldprice:"￥2"
                            },
                            {    id:4,
                                name:'康乃馨紫色',
                                descripe:"脆糯营养，口感好，健康绿色",
                                img:'/static/image/1.jpg',
                                price:"￥3",
                                oldprice:"￥100"
                            }
                        ]}
                ],
                carNum: 0,
                loadStatus: '',
                listQuery: {
                    pageNum: 1,
                    pageSize:5
                },
                lastPage: 1,
                busin: {
                    name: '',
                    address: '',
                    pic: ''
                }
            }
        },
        onReachBottom() {
            if (this.listQuery.pageNum < this.lastPage) {
                this.listQuery.pageNum += 1
                this.getList(this.businId)
            }
        },
        onLoad(option) {
            this.height = Number(uni.getSystemInfoSync().windowHeight) - 55;
            this.businId = option.businId
            this.getList(option.businId)
        },
        methods: {
            getList(id) {
                uni.showLoading()
                this.loadStatus = 'loading'
                this.listQuery = {
                    ...this.listQuery,
                    pageNum: this.listQuery.pageNum
                }
                uni.request({
                    url: `good/page/${id}`,
                    method: 'GET',
                    data: this.listQuery,
                    header: {
                        'content-type': 'application/json',
                        'Authorization': 'Bearer ' + uni.getStorageSync('token')
                    },
                    success: (res) => {
                        // this.list = res.data.data.list
                        res.data.data.list.forEach(item=>{
                            this.list.push(item);
                        })
                        this.busin = {
                            name: this.list[0].businName,
                            address: this.list[0].address
                        }
                        console.log(this.list[0])
                            this.lastPage = res.data.data.totalPage
                        if (this.listQuery.pageNum < res.data.data.totalPage) {
                            this.loadStatus = ''
                        } else {
                            this.loadStatus = 'over'
                        }
                        uni.hideLoading();
                    },
                    fail: (res) => {
                        uni.hideLoading();
                        this.$api.msg(res.data.message)
                    }
                })
            },
            //	加载更多
            loadMore() {
                if (this.listQuery.pageNum < this.lastPage) {
                    this.listQuery.pageNum += 1
                    this.getList(this.businId)
                }
            },
            //分类切换显示
            showCategory(index){
                this.showCategoryIndex = index;
            },
            addCart: function(item) {
                if (item.count >= 0) {
                    item.count++
                    this.categoryList.forEach((good) => {
                        good.list.forEach((food) => {
                            if (item.name == food.name)
                                food.count = item.count
                        })
                    })
                } else {
                    console.log('add')
                    this.categoryList.forEach((good) => {
                        good.list.forEach((food) => {
                            if (item.name == food.name)
                                this.$set(food, 'count', 1)
                        })
                    })
                }
            },
            decreaseCart(item) {
                if (item.count) {
                    item.count--
                    this.categoryList.forEach((good) => {
                        good.list.forEach((food) => {
                            if (item.name == food.name)
                                food.count = item.count
                        })
                    })
                }
            },
            inputCart: function(item) {
                if (item.count >= 0) {
                    item.count++
                    this.categoryList.forEach((good) => {
                        good.list.forEach((food) => {
                            if (item.name == food.name)
                                food.count = item.count + -1
                        })
                    })
                } else {
                    this.categoryList.forEach((good) => {
                        good.list.forEach((food) => {
                            if (item.name == food.name)
                                this.$set(food, 'count', 1)
                        })
                    })
                }
            },
            // 获得购物车所有商品数量
            getAllCount: function(item) {
                let result = [];
                let count = 0;
                for (let i = 0; i < this.categoryList.length; i++) {
                    count = 0;
                    this.categoryList[i].list.forEach((food) => {
                        // console.log('food',food);
                        if (food.count >= 0) {
                            count += food.count
                            this.$set(this.categoryList[i], 'count', count)
                        }
                    })
                    result.push(count)
                }
                result.sort(function(a, b) {
                    return a - b;
                })
                count = result[result.length - 1]
                return count;
            },
            navTo(url) {
                uni.navigateTo({
                    url: url
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content_box {
        padding: 30rpx 0;
        .flex {
            justify-content: space-between;
            flex-wrap: wrap;
            margin: 0 12rpx;
        }
        .list_1 {
            /*width: 42%;*/
            margin-bottom: 20rpx;
            background: #fff;
            border-radius: 15rpx;
            flex: 0 1 49.5%;
            overflow: hidden;
            line-height: 1.5;
            .r_img {
                border-radius: 15rpx 15rpx 0 0;
                width: 100%;
                height: 330rpx;
                overflow: hidden;
                text-align: center;
                background: #f2f2f2;
                position: relative;
                .img_txt {
                    font-size: 34rpx;
                    position: absolute;
                    left: 30%;
                    line-height: 9;
                    height: 100%;
                    color: #999;
                }
                .image {
                    border-radius: 15rpx 15rpx 0 0;
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left:0;
                }
            }
            .r_des {
                font-size: 34rpx;
            }
            .u_price {
                color: red;
            }
        }
    }
    .category-list{
        width: 100%;
        background-color: #fff;
        display: flex;
        padding-bottom: 99upx;
        margin-top: 40rpx;
        height: 80vh;
        display: none;

        .left,.right{
            background: #fff;
            bottom: 0upx;
        }
        .left{
            width: 24%;
            left: 0upx;
            background-color: #f6f3f3;

            .row{
                width: 100%;
                height: 90upx;
                display: flex;
                align-items: center;
                .text{
                    width: 100%;
                    position: relative;
                    font-size: 28upx;
                    display: flex;
                    justify-content: center;
                    color:#999999;
                    .block{
                        position: absolute;
                        width: 0upx;
                        left: 0;
                    }
                }
                &.on{
                    height: 100upx;
                    background-color: #fff;
                    .text{
                        font-size: 30upx;
                        // font-weight: 600;
                        // color: #2d2d2d;
                        position: relative;
                        .block{
                            width: 10upx;
                            height: 80%;
                            top: 10%;
                            // background-color: #f06c7a;
                        }
                    }
                }
            }
        }
        .right{
            width: 76%;
            left: 24%;
            .category{
                // 				width: 94%;
                padding: 20upx 20upx;

                .list{
                    /*margin-top: 40upx;*/
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    line-height: 1.3;
                    .box{
                        width: 100%;
                        .m-store-item{
                            display: flex;
                            flex-direction: row;
                            width: 100%;
                            justify-content: space-between;
                            align-items: flex-end;
                            margin-top: 30upx;
                            margin-bottom: 30upx;
                            .m-img{
                                flex: 0 0 170upx;
                                height: 170upx;
                                background: #eee;
                            }
                            .m-text{
                                flex:1;
                                padding: 0 20upx;
                                .m-title{
                                    font-size: 32upx;
                                    color:#4c4c4c;
                                }
                                .m-descripe{
                                    font-size: 24upx;
                                    color:#999999;
                                    margin-top: 10upx;
                                }
                                .m-price{
                                    font-size: 28upx;
                                    color:#ff582b;
                                    font-weight: bold;
                                    margin-top: 5upx;
                                }
                                .m-old-price{
                                    display: flex;
                                    flex-direction: row;
                                    font-size: 18upx;
                                    color:#999999;
                                    margin-top: 5upx;
                                    .m-num{
                                        // font-size:  20upx;
                                    }
                                }
                            }
                            .m-distance{
                                flex: 0 1 30upx;
                                color:#b2b2b2;
                                font-size: 20upx;
                                text-align: right
                            }
                        }
                    }
                }
            }
        }
    }
    .m-content{
        width: 690upx;
        position: relative;
        bottom: 10upx;
        left: 30upx;
        right: 30upx;
        margin-top: 30upx;
        background:#fff;
        border-radius: 15upx;
        box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
        z-index: 100;
        .m-message{
            padding:20upx;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-end;
            .m-img{
                flex:0 0 135upx;
                height: 135upx;
            }
            .m-body{
                flex: 1;
                // padding: 20upx;
                padding-left: 10upx;
                padding-bottom: 0;
                .m-title{
                    font-size: 36upx;
                    color:#333333
                }
                .m-text{
                    font-size: 30upx;
                    color:#999999;
                    line-height: 38upx;
                    margin-top: 10upx;
                }
                .m-time{
                    font-size: 30upx;
                    color:#999999;
                    margin-top: 10upx;
                }
            }
            .m-phone{
                flex:0 0 40upx;
                text-align: right
            }
        }
    }
    .allcount {
        position: absolute;
        right: 6px;
        top: 8px;
        display: inline-block;
        padding: 0 4px;
        font-size: 9px;
        line-height: 16px;
        font-weight: 400;
        border-radius: 50%;
        background-color: #f01414;
        color: #ffffff;
    }
</style>